<div style="padding: 2px 15px;">
    <div class="tab" appCalcTableScrolly offsetTop="345" [showShadow]="false"
         (scrollY)="scrollY = $event" scrollYUnit="" [style.height]="scrollY + 152 + 'px'"
         (tabWidthChange)="tabWidthChange($event)">
        <form nz-form [formGroup]="form">
            <nz-descriptions nzTitle="基本信息" [nzColumn]="3">
                <nz-descriptions-item nzTitle="应用分类">
                    <ng-container *ngIf="state===0">{{bean?.typeName}}</ng-container>
                    <ng-container *ngIf="state===1">
                        <nz-select formControlName="typeId" id="typeId" nzPlaceHolder="请选择" style="width: 160px;">
                            <nz-option *ngFor="let item of applicationTypes$ | async" [nzValue]="item.id"
                                       [nzLabel]="item.typeName"></nz-option>
                        </nz-select>
                    </ng-container>
                </nz-descriptions-item>
                <nz-descriptions-item nzTitle="应用名称">
                    <ng-container *ngIf="state===0">{{bean?.alias}}</ng-container>
                    <ng-container *ngIf="state===1">
                        <input nz-input formControlName="alias" id="alias" />
                    </ng-container>
                </nz-descriptions-item>
                <nz-descriptions-item nzTitle="备&emsp;&emsp;注">
                    <ng-container *ngIf="state===0">{{bean?.memo}}</ng-container>
                    <ng-container *ngIf="state===1">
                        <input nz-input formControlName="memo" id="memo" />
                    </ng-container>
                </nz-descriptions-item>
                <nz-descriptions-item nzTitle="连接超时">
                    <ng-container *ngIf="state===0">{{bean?.connectTimeout}}ms</ng-container>
                    <ng-container *ngIf="state===1">
                        <nz-input-group nzAddOnAfter="毫秒">
                            <input nz-input placeholder="" appNumberOnly [scale]="0" formControlName="connectTimeout"
                                   id="connectTimeout" maxlength="100"/>
                        </nz-input-group>
                    </ng-container>
                </nz-descriptions-item>
                <nz-descriptions-item nzTitle="读取超时">
                    <ng-container *ngIf="state===0">{{bean?.readTimeout}}ms</ng-container>
                    <ng-container *ngIf="state===1">
                        <nz-input-group nzAddOnAfter="毫秒">
                            <input nz-input placeholder="" appNumberOnly [scale]="0" formControlName="writeTimeout"
                                   id="writeTimeout" maxlength="100"/>
                        </nz-input-group>
                    </ng-container>
                </nz-descriptions-item>
                <nz-descriptions-item nzTitle="发送超时">
                    <ng-container *ngIf="state===0">{{bean?.writeTimeout}}ms</ng-container>
                    <ng-container *ngIf="state===1">
                        <nz-input-group nzAddOnAfter="毫秒">
                            <input nz-input placeholder="" appNumberOnly [scale]="0" formControlName="readTimeout"
                                   id="readTimeout" maxlength="100"/>
                        </nz-input-group>
                    </ng-container>
                </nz-descriptions-item>
                <nz-descriptions-item nzTitle="协&emsp;&emsp;议">
                    <ng-container *ngIf="state===0">{{bean?.protocol}}</ng-container>
                    <ng-container *ngIf="state===1">
                        <nz-select formControlName="protocol" id="protocol" nzPlaceHolder="请选择" style="width: 160px;">
                            <nz-option nzValue="http" nzLabel="http"></nz-option>
                            <nz-option nzValue="https" nzLabel="https"></nz-option>
                        </nz-select>
                    </ng-container>
                </nz-descriptions-item>
                <nz-descriptions-item nzTitle="路&emsp;&emsp;径">
                    <ng-container *ngIf="state===0">{{bean?.path}}</ng-container>
                    <ng-container *ngIf="state===1">
                        <input nz-input formControlName="path" id="path" />
                    </ng-container>
                </nz-descriptions-item>
                <nz-descriptions-item nzTitle="端&emsp;&emsp;口">
                    <ng-container *ngIf="state===0">{{bean?.port}}</ng-container>
                    <ng-container *ngIf="state===1">
                        <input nz-input appNumberOnly [scale]="0" formControlName="port" id="port" />
                    </ng-container>
                </nz-descriptions-item>
            </nz-descriptions>
        </form>

        <div nz-row>
            <div nz-col nzSpan="12">
                <nz-card [nzBordered]="false" [nzSize]="'small'" nzTitle="服务器" [nzExtra]="targetsExtraTemplate">
                    <ng-template #targetsExtraTemplate>
                        <button *ngIf="state !== 0" nz-button [disabled]="editing" nzType="primary" nzShape="circle"
                                (click)="addTarget()">
                            <i nz-icon nzType="file-add"></i>
                        </button>&nbsp;
                        <button *ngIf="state !== 0" nz-button [disabled]="editing" nzType="danger" nzShape="circle"
                                nz-popconfirm nzTitle="您确认要删除所选记录吗?"
                                (nzOnConfirm)="deleteTargets()">
                            <i nz-icon nzType="delete"></i>
                        </button>
                    </ng-template>
                    <nz-table #pT1 nzBordered
                              [nzScroll]="{ y: '240px' }"
                              [nzData]="targets"
                              [nzSize]="'small'"
                              [nzFrontPagination]="false"
                              [nzShowPagination]="false">
                        <thead>
                        <tr>
                            <th nzWidth="40px">&nbsp;</th>
                            <th nzWidth="150px">IP</th>
                            <th nzWidth="100px">端口</th>
                            <th nzWidth="100px" nzAlign="right">权重</th>
                            <th *ngIf="state !== 0" nzWidth="100px" nzAlign="center">操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr *ngFor="let item of pT1.data; let i = index">
                            <td nzShowCheckbox [(nzChecked)]="item.checked"></td>
                            <td>
                                <ng-container *ngIf="!editCache[item.id].edit; else ipInputTpl">
                                    {{ item?.ip }}
                                </ng-container>
                                <ng-template #ipInputTpl>
                                    <input type="text" nz-input [(ngModel)]="editCache[item.id].data.ip" [ngModelOptions]="{standalone: true}" />
                                </ng-template>
                            </td>
                            <td>
                                <ng-container *ngIf="!editCache[item.id].edit; else portInputTpl">
                                    {{ item?.port }}
                                </ng-container>
                                <ng-template #portInputTpl>
                                    <input type="text" nz-input [(ngModel)]="editCache[item.id].data.port" appNumberOnly [scale]="0" [ngModelOptions]="{standalone: true}" />
                                </ng-template>
                            </td>
                            <td nzAlign="right">
                                <ng-container *ngIf="!editCache[item.id].edit; else weightInputTpl">
                                    {{ item?.weight }}
                                </ng-container>
                                <ng-template #weightInputTpl>
                                    <input type="text" nz-input [(ngModel)]="editCache[item.id].data.weight" appNumberOnly [scale]="0" [ngModelOptions]="{standalone: true}" />
                                </ng-template>
                            </td>
                            <td *ngIf="state !== 0" nzAlign="center">
                                <ng-container *ngIf="!editCache[item.id].edit; else saveTpl">
                                    <ng-container *ngIf="bean == null">
                                        <button nz-button nzType="primary" (click)="startEdit(item.id)">
                                            <i nz-icon nzType="form"></i>
                                        </button>&nbsp;
                                    </ng-container>
                                    <button nz-button nzType="danger" nz-popconfirm nzTitle="您确认要删除【{{item?.ip + ':' + item?.port}}】吗?"
                                            (nzOnConfirm)="deleteTargets(item)">
                                        <i nz-icon nzType="delete"></i>
                                    </button>
                                </ng-container>
                                <ng-template #saveTpl>
                                    <button nz-button nzType="primary" (click)="saveTarget(item.id)">
                                        <i nz-icon nzType="save"></i>
                                    </button>&nbsp;
                                    <button nz-button nzType="danger" (click)="cancelEdit(item.id)">
                                        <i nz-icon nzType="stop"></i>
                                    </button>
                                </ng-template>
                            </td>
                        </tr>
                        </tbody>
                    </nz-table>
                </nz-card>
            </div>
            <div nz-col nzSpan="11" nzOffset="1">
                <nz-card [nzBordered]="false" [nzSize]="'small'" nzTitle="插件" [nzExtra]="pluginsExtraTemplate">
                    <ng-template #pluginsExtraTemplate>
                        <button *ngIf="state !== 0" nz-button nzType="primary" nzShape="circle" nz-tooltip nzTitle="添加" (click)="openPluginsWin(null)">
                            <i nz-icon nzType="file-add"></i>
                        </button>
                    </ng-template>
                    <nz-table #pT2 nzBordered
                              [nzData]="pluginsList"
                              [nzSize]="'small'"
                              [nzFrontPagination]="false"
                              [nzShowPagination]="false">
                        <thead>
                        <tr>
                            <th nzWidth="120px">插件名称</th>
                            <th nzWidth="100px">是否启用</th>
                            <th nzWidth="150px">创建时间</th>
                            <th *ngIf="state !== 0" nzWidth="100px" nzAlign="center">操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr *ngFor="let item of pT2.data; let i = index">
                            <td>{{ item?.name }}</td>
                            <td>{{ item?.enabled }}</td>
                            <td>{{ item?.createdAt }}</td>
                            <td *ngIf="state !== 0" nzAlign="center">
                                <button nz-button nzType="primary">
                                    <i nz-icon nzType="form"></i>
                                </button>&nbsp;
                                <button nz-button nzType="danger" nz-popconfirm nzTitle="您确认要删除【{{item?.name}}】吗?"
                                        (nzOnConfirm)="deletePlug(item)">
                                    <i nz-icon nzType="delete"></i>
                                </button>
                            </td>
                        </tr>
                        </tbody>
                    </nz-table>
                </nz-card>
            </div>
        </div>

        <div class="list-page-pagination-wrapper clearFix"
             style="position: absolute; padding: 5px 33px 4px 24px; height: 44px; border-top: 1px solid #d9d9d9;">
            <div class="list-page-buttons fl">
            </div>
            <div class="bottom-pagination fr">
                <button *ngIf="state===0" nz-button nzType="primary" (click)="state=1">编 辑</button>
                <button *ngIf="state===1" nz-button nzType="primary" [disabled]="!form.valid" (click)="saveData()">保 存</button>&nbsp;
                <button *ngIf="state===1" nz-button nzType="default" (click)="state=0">取 消</button>
            </div>
        </div>
    </div>
</div>
